import React from 'react'
import './Pages.css'
import 'animate.css'
import { NavLink, Route, Switch } from 'react-router-dom'
import { CSSTransition } from 'react-transition-group'

export function Home() {
    return <div className="page home">
        <h1>首页</h1>
    </div>
}

export function News() {
    return <div className="page news">
        <h1>新闻页</h1>
    </div>
}

export function Personal() {
    return <div className="page personal">
        <h1>个人中心</h1>
    </div>
}

export function NavBar() {
    return (
        <div className="header">
            <NavLink exact to="/">首页</NavLink>
            <NavLink exact to="/news">新闻页</NavLink>
            <NavLink exact to="/personal">个人中心</NavLink>
        </div>
    )
}

function TransitionRoute(props) {
    // CSSTransition 不能有Switch包裹
    // Switch会导致匹配到了就不会匹配了，后面的children函数就不会运行了
    const { component: Component, ...rest } = props
    return <Route path="/" exact {...rest}>
        {({ match }) => {
            // match 有值，代表匹配成功
            return <CSSTransition
                in={!!match}
                timeout={500}
                classNames={{
                    enter: "animated fast fadeInRight",
                    exit: "animated fast fadeOutLeft",
                }}
                mountOnEnter={true}
                unmountOnExit={true}
            >
                {/* mountOnEnter 只有进入过后才会挂载, unmountOnExit当退出的时候会卸载掉子组件*/}
                <Component />
            </CSSTransition>
        }}
    </Route>
}


export function Routes() {
    return <>
        {/* <Route path="/" exact component={Home} /> */}
        <TransitionRoute path="/" exact component={Home} />
        <TransitionRoute path="/news" exact component={News} />
        <TransitionRoute path="/personal" exact component={Personal} />
    </>
}

export default function Pages() {
    return (
        <div className="pages">
            <NavBar />
            <div className="page-container">
                <Routes />
            </div>
        </div>
    )
}
